<template>
    <div class="bofang">
        <img :src="pic" style="width: 0.65rem;height: 0.65rem;border-radius: 0.65rem;" @click="toPlay"/>
        <p @click="toPlay">{{name}} - {{writer}}</p>
        <div style="display: flex;align-items:center">
            <i class="iconfont icon-bofang1" v-show="!play" @click="playSong" style="font-size:0.45rem;margin-right: 0.22rem;color: white;"></i>
            <i class="iconfont icon-zanting" v-show="play" @click="playSong" style="font-size:0.4rem;margin-right: 0.22rem;color: white;"></i>
            <i class="iconfont icon-MENU_FOLD" style="font-size:0.45rem;margin-right: 0.2rem;color: white;"></i>
        </div>
        <audio ref="audio" :src="'https://music.163.com/song/media/outer/url?id=1901371647.mp3'"></audio>
   </div>
</template>

<script>
    import {reactive,toRefs,onMounted} from 'vue'
    import {mapState,mapMutations,useStore} from 'vuex';
    import {useRouter} from 'vue-router'
    import axios from 'axios'
    export default{
        setup(){
           const state=reactive({
               id:1901371647,
               name:"孤勇者",
               pic:"https://p1.music.126.net/aG5zqxkBRfLiV7A8W0iwgA==/109951166702962263.jpg",
               writer:"陈奕迅",
               play:true
           })
           const store = useStore();
           onMounted(()=>{
               let audio=document.getElementsByTagName('audio')
               audio[0].pause();
           })
           const router=useRouter();
           const toPlay=()=>{
               router.push({
                  path:'/playSong',
                  query:{
                      index:state.id,
                      pic:state.pic,
                      name:state.name,
                      writer:state.writer
                  }
               })
           }
           const playSong=()=>{
                let audio=document.getElementsByTagName('audio')
                console.log(audio[0].paused)
                if (audio[0].paused) {
                    audio[0].play()
                    state.play = true
                    store.state.id = setInterval(()=>{
                        store.commit('setCurrentTime',audio[0].currentTime)
                    },1000)
                } else {
                    audio[0].pause()
                    state.play = false
                    clearInterval(store.state.id)
                }
           }
           return{
               ...toRefs(state),
               toPlay,playSong
           }
        }
    }
</script>

<style>
.bofang{
  height: 0.7rem;
  margin:0.12rem 0 0rem 0.12rem;
  display: flex;
  align-items: center;
}
.bofang p{
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 5rem;
    overflow: hidden;
    margin-left: 0.2rem;
    color: white;
    font-weight: bold;
    font-size: 0.24rem;
}
</style>